<!-- 房态 -->
<template>
  <div class="tips-box margin-top-20" :class="pageType == 'room' ? 'tips-room' : 'tips-other'">
    <div class="font-size-16 font-weight-700 padding-left-10">图例</div>
    <el-divider class="margin-top-bottom-20"></el-divider>
    <div class="flex padding-left-right-10">
      <div class="flex-column" :class="pageType == 'room' ? 'margin-right-70' : ''">
        <div v-for="(item, index) in parmData" :key="index" @click="clickQuick(item)" class="flex align-centers quick-box margin-bottom-20" :class="pageType != 'room' ? 'cursor-pointer' : ''">
          <div class="quick margin-right-5" :style="`background:${item.color}`"></div>
          <div>{{ item.text }}</div>
        </div>
      </div>
      <div class="tips-commercial flex-1">
        <div v-for="(item, index) in assetTypeList" :key="index" :class="index % 2 == 0 ? 'margin-right-70' : ''" class="flex align-centers margin-bottom-20 f-left">
          <img :src="item.iconUrl" class="quick-img margin-right-5" />
          <div class="one-line-ellipsis txt">{{ item.catalogName }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      parmData: {
        type: Array,
        default: () => {
          return [];
        },
      },
      assetTypeList: {
        type: Array,
        default: () => {
          return [];
        },
      },
      //页面类型 room是房态的 有一些单独的处理
      pageType: {
        type:String,
        default:""
      }
    },

    data() {
      return {};
    },

    methods: {
      clickQuick(item){
        this.$emit("change",item)
      }
    },
  };
</script>
<style scoped lang="scss">
  .tips-box {
    .tips-commercial {
      .txt {
        width: 60px;
      }
    }
    .area-icon {
      width: 20px;
      height: 20px;
    }
    .quick-img {
      width: 16px;
      height: 16px;
    }
    .quick{
      width: 14px;
      height: 14px;
      border-radius: 3px;
    }
  }
  .tips-commercial::-webkit-scrollbar {
    display: none;
  }

  .tips-other{
    width: 160px;
  }

  @media only screen and (max-width: 1450px) {
    .tips-room {
      width: 280px;
    }
    .tips-commercial {
      overflow-y: auto;
      height: 452px;
    }
  }
  @media only screen and (min-width: 1450px) {
    .tips-room {
      width: 410px;
    }
    .tips-commercial {
      height: 538px;
      overflow: hidden;
    }
  }
</style>
